<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
		"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Editor Test</title>

	<style type="text/css">
		@import "../../../dojo/resources/dojo.css";
		@import "../css/dijitTests.css";
	</style>

	<!-- required: a default dijit theme: -->
	<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/tundra/tundra.css">

	<!-- required: dojo.js -->
	<script type="text/javascript" src="../../../dojo/dojo.js"
		djConfig="parseOnLoad: true, isDebug: true"></script>

	<!-- not needed, for testing alternate themes -->
	<script type="text/javascript" src="../_testCommon.js"></script>


	<script type="text/javascript">
		dojo.require("dijit.dijit"); // optimize: load dijit layer
		dojo.require("dijit.Editor");
		dojo.require("dijit._editor.plugins.AlwaysShowToolbar");
		dojo.require("dijit._editor.plugins.FontChoice");  // 'fontName','fontSize','formatBlock'
		dojo.require("dijit._editor.plugins.TextColor");
		dojo.require("dijit._editor.plugins.LinkDialog");
		dojo.require("dojo.parser");	// scan page for widgets and instantiate them
	</script>
</head>

<body class="tundra">
	<div dojoType="dijit.Editor" id="automated" height="1.5em" plugins="[]" focusOnLoad="true" style="border:0px;"
	>Automated Test - all check boxes should be checked<script type='dojo/method' event='onFocus'>
			if(!document.getElementById('onFocusFired').checked){
				document.getElementById('onFocusFired').checked=true;
				document.getElementById('initialValueOK').checked = (dijit.byId('automated').getValue() == 'Automated Test - all check boxes should be checked');
				dijit.byId('automated').document.execCommand('selectall', false, false);
				document.getElementById('onChangeOKnow').checked=true;
				dijit.byId('automated').document.execCommand('underline', false, false);
				setTimeout(dojo.hitch(dijit.byId('editor0'),"focus",0));
			}
		</script
		><script type='dojo/method' event='onBlur'>
			if(!document.getElementById('onBlurFired').checked){
				document.getElementById('onBlurFired').checked=true;
				dijit.byId('automated').attr('disabled', true);
				setTimeout(function(){ try {
					dijit.byId('automated').document.execCommand('bold', false, false);
					document.getElementById('disabledOK').checked = (dijit.byId('automated').document.queryCommandState('bold') == false);
				} catch(e) { document.getElementById('disabledOK').checked = true; }}, 0);
			}
		</script
		><script type='dojo/method' event='onChange'>
			if(document.getElementById('onChangeOKnow').checked && !document.getElementById('onChangeFired').checked){
				document.getElementById('onChangeFired').checked=true;
			}
		</script
	></div>
	Focus:<input type="checkbox" id="onFocusFired" disabled autoComplete="off">
	Value:<input type="checkbox" id="initialValueOK" disabled autoComplete="off">
	<input type="checkbox" id="onChangeOKnow" disabled autoComplete="off" style="display:none;">
	Change:<input type="checkbox" id="onChangeFired" disabled autoComplete="off">
	Blur:<input type="checkbox" id="onBlurFired" disabled autoComplete="off">
	Disabled:<input type="checkbox" id="disabledOK" disabled autoComplete="off">
	<br>
	<br>

	<h1 class="testTitle"><label for="editor1">Editor + Plugins Test</label></h1>

	<h2>No plugins, initially empty</h2>
	<div style="border: 1px solid black;">
		<div dojoType="dijit.Editor" id="editor0" height="100" plugins="[]"></div>
	</div>


	<h2>Created from div</h2>
	<input id="focusBefore" value="input before editor1">
	<div style="border: 1px solid black;">
		<div dojoType="dijit.Editor" id="editor1" disableSpellCheck="true"
			onChange="console.log('editor1 onChange handler: ' + arguments[0])"
		><p>This instance is created from a div directly with default toolbar and plugins</p>
		The following HTML should appear as source: &lt;INPUT TYPE="IMAGE" SRC="javascript:alert('no scripting attacks')"&gt;
		</div>
	</div>
	<input id="focusAfter" value="input after editor1">
	<button onClick="dijit.byId('editor1').destroy()">destroy</button>
	<button onClick="dijit.byId('editor1').attr('disableSpellCheck', !dijit.byId('editor1').attr('disableSpellCheck'))">toggle spell check</button>
	<button onclick="console.log(dijit.byId('editor1').attr('value'))">getValue</button>
	<hr/>

	<h2>Created from div, auto-expanding</h2>
	<div style="border: 1px dotted black;">
		<h3><label for="thud">thud - from div</label></h3>
		<div dojoType="dijit.Editor" height="" minHeight="75px"
			onChange="console.log('thud onChange handler: ' + arguments[0])"
			extraPlugins="['dijit._editor.plugins.AlwaysShowToolbar']"
			styleSheets="../../../dojo/resources/dojo.css" id="thud">
			Extra text
			<p>
				This editor is created from a div with AlwaysShowToolbar plugin (do not forget to set height="").
			</p>
			<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
				semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
				porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
				Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
				Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
				risus.
			</p>
			The following HTML should appear as source: &lt;INPUT TYPE="IMAGE" SRC="javascript:alert('no scripting attacks')"&gt;
		</div>
		<h3>..after</h3>
	</div>
	<hr/>

	<h2>Optional toolbar buttons</h2>
	<div style="border: 1px dotted black;">
		<h3><label for="blah">blah entry</label></h3>
		<div dojoType="dijit.Editor"
			plugins="['bold','italic','|','createLink','foreColor','hiliteColor',{name:'dijit._editor.plugins.FontChoice', command:'fontName', generic:true},'fontSize','formatBlock','insertImage','insertHorizontalRule']"
			styleSheets="../../../dojo/resources/dojo.css" id="blah">
			This instance includes optional toolbar buttons which pull in additional ui (dijit) code.
			Note the dojo.require() statements required to pull in the associated editor plugins to make
			this work.
			<br>
			<span style="font-family: serif">This is serif.</span>
			<br>
			<span style="font-family: sans-serif">This is sans-serif.</span>
			<br>
			<span style="font-family: monospace">This is monospace.</span>
			<br>
			<span style="font-family: cursive">This is cursive.</span>
			<br>
			<span style="font-family: fantasy">This is fantasy.</span>
			<br>
		</div>
		<h3>..after</h3>
		<button onclick="alert(dijit.byId('blah').attr('value'));">getValue</button>
	</div>
	<hr/>

	<h2>Plugins specified</h2>
	<div style="border: 1px dotted black;">
		<h3><label for="blah2">Another blah entry</label></h3>
		<div dojoType="dijit.Editor"
			plugins="['bold','italic','|',{name:'dijit._editor.plugins.FontChoice', command:'fontName', custom:['Verdana','Myriad','Garamond','Apple Chancery','Hiragino Mincho Pro']}, {name:'dijit._editor.plugins.FontChoice', command:'fontSize', custom:[3,4,5]}, {name:'dijit._editor.plugins.EnterKeyHandling', blockNodeForEnter:'DIV'}]"
			styleSheets="../../../dojo/resources/dojo.css" id="blah2">
			This instance demos how to:
			<ol>
				<li>specify which plugins to load (see the plugins property): this instance loads FontChoice plugin, among others;</li>
				<li>specify options for a plugin (see the last item in the plugins array)</li>
			</ol>
		</div>
		<h3>..after</h3>
	</div>
	<hr/>

	<h2>Programmatic creation</h2>
	<div id="programmatic">This div will become an editor.</div>
	<button
		id="create"
		onclick="new dijit.Editor({}, dojo.byId('programmatic')); dojo.query('#create').orphan();">
	create static editor
	</button>
	<div id="programmatic2">This div will become an auto-expanding editor.</div>
	<button
		id="create2"
		onclick="new dijit.Editor({height: '', extraPlugins: ['dijit._editor.plugins.AlwaysShowToolbar']}, dojo.byId('programmatic2')); dojo.query('#create2').orphan();">
	create expanding editor
	</button>
</body>
</html>
